<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>carousel模块快速使用</title>
    <link rel="stylesheet" href="/css/layui.css" media="all">
</head>

<body>
<div class="layui-carousel" id="test1" style="margin: 0 auto;">
    <h1 style="text-align:center;">校园风采</h1>
    <br>
    <br>
    <div carousel-item>
        <div><img style="width: 1280px ;height: 720px" src="/images/1 (1).jpg"></div>
        <div><img style="width: 1280px;height: 720px" src="/images/1 (2).jpg"></div>
        <div><img style="width: 1280px;height: 720px" src="/images/1 (3).jpg"></div>
        <div><img style="width: 1280px;height: 720px" src="/images/1 (4).jpg"></div>
    </div>
</div>

<script src="/js/layui.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            height: '450px'
            , width: '1080px' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            // ,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>

</html>
